import { Options as Component } from 'vue-property-decorator';
import { Vue } from 'vue-class-component';
import { Card, Button, Stepper } from 'vant';

@Component({
  name: 'Cart',
  render() {
    return (
      <div class="pb-20">
        <div class="divide-y">
          {this.cartItems.map(item => (
            <div key={item.id} class="p-4">
              <Card>
                <div class="flex">
                  <img src={item.image} class="w-24 h-24 object-cover" />
                  <div class="ml-4 flex-1">
                    <div class="text-sm">{item.title}</div>
                    <div class="text-red-500 mt-2">￥{item.price}</div>
                    <div class="mt-2">
                      <Stepper v-model={item.count} />
                    </div>
                  </div>
                </div>
              </Card>
            </div>
          ))}
        </div>
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t p-4">
          <Button block type="primary">
            结算
          </Button>
        </div>
      </div>
    );
  }
})
export default class Cart extends Vue {
  private cartItems = [
    {
      id: 1,
      title: '商品1',
      price: '99.00',
      count: 1,
      image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'
    },
    // 更多商品...
  ];
} 